{{- extends "layout/default" }}
{{- import "blocks/novelnav" }}
{{- import "blocks/comments" }}
{{- block body() }}

{{ fontType := .FontType }}
{{ viewMode := .ViewMode }}

<!-- Prefetch links -->
<link rel="prefetch" href="/users/{{ .User.ID }}/novels">
{{- if .Novel.SeriesNavData }}
<link rel="prefetch" href="/novel/series/{{ .Novel.SeriesNavData.SeriesID }}">
{{- end }}

<div class="row justify-content-center g-4">

  <div class="col-12 col-lg-9">
    <div class="custom-card">
      <div class="custom-card-body bg-charcoal-surface1 p-4">
        <div class="row g-4">
          <div class="col-12 col-md-4">
            <!-- Cover art -->
            <a href="{{ .Novel.CoverURL }}">
              <img src="{{ .Novel.CoverURL }}" alt="{{ .Novel.Title }} cover" class="d-block img-fluid rounded mx-auto" />
            </a>
          </div>
          <div class="col-12 col-md-8">
            <!-- Title -->
            <h1 class="mb-2">{{ .Novel.Title }}</h1>

            <!-- Series name -->
            {{- if .Novel.SeriesNavData }}
            <h3 class="fw-normal mb-2">
              <a href="/novel/series/{{ .Novel.SeriesNavData.SeriesID }}" class="text-body-secondary text-decoration-none">
                {{- .Novel.SeriesNavData.Title }} #{{- .Novel.SeriesNavData.Order}}
              </a>
            </h3>
            {{- end}}

            <!-- Author -->
            <div class="d-flex align-items-center mb-2">
              <a href="/users/{{ .User.ID }}/novels" class="text-decoration-none">
                <img src="{{ .User.Avatar }}" alt="{{ .User.Name }}" class="rounded-circle me-2" style="width: 30px; height: 30px" />
              </a>
              <h4 class="mb-0">
                <a href="/users/{{ .User.ID }}/novels" class="text-body-secondary text-decoration-none">
                  {{ .User.Name }}
                </a>
              </h4>
            </div>

            <!-- Word count and reading time -->
            <p class="small text-body-secondary">
              <span>{{ .Novel.WordCount }} word(s)</span> &middot; <span>{{ floor: .Novel.ReadingTime / 60 }} mins</span>
            </p>

            <!-- View Pixiv original button -->
            <div class="d-inline-flex border border-neutral-700 rounded py-1 px-2 mb-3">
              <small class="text-center">
                <i class="bi bi-box-arrow-up-right me-1"></i>
                <a href="https://pixiv.net/novel/show.php?id={{ .Novel.ID }}" class="text-body-secondary fw-semibold">
                  View on pixiv.net
                </a>
              </small>
            </div>

            <!-- Description -->
            <p>{{ raw: .Novel.Description }}</p>

            <!-- Tags -->
            <div class="d-flex flex-wrap align-items-baseline mb-3">
              {{- if .Novel.AiType == 2 }}
              <span class="badge bg-warning text-dark mb-2 me-2">AI-generated</span>
              {{- end }}

              {{- range .Novel.Tags.Tags }}
                {* NOTE: early block to catch the R-18 tag *}
                {{- if isEmphasize(.Name) }}
                <span class="badge bg-danger mb-2 me-2">{{ .Name }}</span>
                {{- end }}
              {{- end }}

              {{- if .Novel.IsOriginal }}
              <span class="badge bg-primary mb-2 me-2">Original</span>
              {{- end }}

              {{- if .Novel.Genre != "0" }}
              <span class="badge bg-secondary mb-2 me-2">{{ novelGenre: .Novel.Genre }}</span>
              {{- end }}

              {{- range .Novel.Tags.Tags }}
                {{- if isEmphasize(.Name) }}
                {* Intentionally empty to not render anything to avoid duplication *}
                {{- else }}
                <div class="d-inline-block mb-2 me-2">
                  <small>
                    <a href="/tags/{{ escapeString(.Name) }}" class="text-primary-emphasis fw-semibold text-decoration-none text-wrap p-0 mb-0">#{{ .Name }}</a>
                  </small>
                </div>
                {{- end }}
              {{- end }}
            </div>

            <!-- Metadata -->
            <div class="d-flex flex-wrap text-body-secondary small me-2">
              <div class="me-3 mb-2 mb-lg-0">
                <i class="bi bi-eye me-2"></i>{{- .Novel.Views }}
              </div>
              <div class="me-3 mb-2 mb-lg-0">
                <i class="bi bi-heart me-2"></i>{{- .Novel.Bookmarks }}
              </div>
              <div class="me-3 mb-2 mb-lg-0">
                <i class="bi bi-hand-thumbs-up me-2"></i>{{- .Novel.Likes }}
              </div>
              <div>
                <i class="bi bi-calendar me-2"></i>{{- parseTime: .Novel.CreateDate }}
              </div>
            </div>

            <!-- Series navigation, if present -->
            <!-- NOTE: using mt-4 as this element is rendered conditionally  -->
            {{- if .Novel.SeriesNavData }}
            <div class="custom-card mt-4">
              <div class="custom-card-body bg-charcoal-surface2">
                <h3 class="text-center px-3 mb-2">
                  <a href="/novel/series/{{ .Novel.SeriesNavData.SeriesID }}" class="text-body text-decoration-none">
                    {{- .Novel.SeriesNavData.Title }}
                  </a>
                </h3>
                <h4 class="text-body-secondary text-center">
                  {* NOTE: formatting for the i18n crawler *}
                  {{ seriesWorks := len(.NovelSeriesContentTitles) }}
                  {{- if seriesWorks == 1 }}
                    <a href="/novel/series/{{ .Novel.SeriesNavData.SeriesID }}" class="text-body-secondary text-decoration-none">
                      <i class="bi bi-stack me-2"></i>{{ seriesWorks }} work in this series
                    </a>
                  {{- else }}
                    <a href="/novel/series/{{ .Novel.SeriesNavData.SeriesID }}" class="text-body-secondary text-decoration-none">
                      <i class="bi bi-stack me-2"></i>{{ seriesWorks }} works in this series
                    </a>
                  {{- end }}
                </h4>
                <hr class="my-3">
                <div class="row row-col-auto nav nav-underline justify-content-center pb-2 px-3">
                  {{ activeState := .Novel.ID }}
                  {{ yield NovelNav(
                      baseURL="/novel/",
                      paths=.NovelSeriesIDs,
                      names=.NovelSeriesTitles,
                      activeState=activeState
                  ) }}
                </div>
              </div>
            </div>
            {{- end }}

          </div>
        </div>
      </div>
    </div>
  </div>

  <noscript>
    <!-- NOTE: using col-12 because noscript forces d-inline which causes justify-content-center to break -->
    <div class="col-12">
      <div class="custom-card">
        <div class="custom-card-body bg-charcoal-surface1 p-4">
          <h2><i class="bi bi-gear-fill me-2"></i>Options</h2>

          <ul class="list-group list-group-flush">
            <li class="list-group-item bg-charcoal-surface1 pt-0 pb-4 px-0">
              <h3>Font family</h3>
              <p>Choose the font style for displaying novels. This affects the readability and aesthetic of the text.</p>
              <form id="novel-font-form" hx-post="/settings/novelFontType" hx-target="#novel-font-response" hx-swap="outerHTML">
                <div class="form-check mb-3">
                  <input class="form-check-input" type="radio" name="font-type" id="font-type-mincho" value="mincho" {{- if fontType == "mincho" }}checked{{- end }} />
                  <label class="form-check-label fw-bold" for="font-type-mincho">Mincho</label>
                  <div id="font-type-mincho-help" class="form-text">A serif font style that resembles traditional Japanese printing. It's often used for formal or literary content, providing a classic and elegant look.</div>
                </div>
                <div class="form-check mb-3">
                  <input class="form-check-input" type="radio" name="font-type" id="font-type-gothic" value="gothic" {{- if fontType == "gothic" }}checked{{- end }} />
                  <label class="form-check-label fw-bold" for="font-type-gothic">Gothic</label>
                  <div id="font-type-gothic-help" class="form-text">A sans-serif font style that's clean and modern. It's commonly used for easy readability on digital screens, offering a contemporary appearance.</div>
                </div>

                <button type="submit" class="custom-btn-secondary">Save</button>
              </form>
              <div id="novel-font-response"></div>
            </li>

            <li class="list-group-item bg-charcoal-surface1 pt-4 pb-0 px-0">
              <h3>Force text orientation</h3>
              <p>Set the text orientation for novels. This affects how the text is displayed and read on the page.</p>
              <form id="novel-view-mode-form" hx-post="/settings/novelViewMode" hx-target="#novel-view-mode-response" hx-swap="outerHTML">
                <div class="form-check mb-3">
                  <input class="form-check-input" type="radio" name="view-mode" id="tx-ori-h" value="1" {{- if viewMode == "1" }}checked{{- end }} />
                  <label class="form-check-label fw-bold" for="tx-ori-h">Horizontal</label>
                  <div id="tx-ori-h-help" class="form-text">Forces the text to be displayed horizontally, left-to-right. This is common for most languages and easier to read on smaller screens or for those more accustomed to Western text layouts.</div>
                </div>
                <div class="form-check mb-3">
                  <input class="form-check-input" type="radio" name="view-mode" id="tx-ori-v" value="2" {{- if viewMode == "2" }}checked{{- end }} />
                  <label class="form-check-label fw-bold" for="tx-ori-v">Vertical</label>
                  <div id="tx-ori-v-help" class="form-text">Forces the text to be displayed vertically, top-to-bottom and right-to-left. This is traditional for some East Asian languages and can provide a unique reading experience, especially for longer texts.</div>
                </div>
                <div class="form-check mb-3">
                  <input class="form-check-input" type="radio" name="view-mode" id="tx-ori-n" value="" {{- if viewMode == "" }}checked{{- end }} />
                  <label class="form-check-label fw-bold" for="tx-ori-n">Don't force (default from Pixiv)</label>
                  <div id="tx-ori-n-help" class="form-text">Uses the original text orientation as set by the author on Pixiv. This is the default option and respects the intended layout of the novel.</div>
                </div>
                <button type="submit" class="custom-btn-secondary">Save</button>
              </form>
              <div id="novel-view-mode-response"></div>
            </li>
          </ul>

        </div>
      </div>
    </div>
  </noscript>

  <!-- NOTE: col-12 to always display at full width, may tune down in the future -->
  <div class="col-12 col-lg-11">
    <div class="custom-card">
      <div class="custom-card-body bg-charcoal-surface1 py-4 px-0">
        <!-- NOTE: mx-0 because the row element overflows the card horizontally without it -->
        <div class="row justify-content-center mx-0">
          <!-- NOTE: px-0 to undo the extra spacing caused by mx-0 -->
            <div class="col-12 px-0">
              <div class="d-flex flex-column align-items-center position-relative mx-4 mb-4 justify-content-center">
                <div class="d-flex flex-column text-center">
                  <h2 class="mb-2">{{ .Novel.Title }}</h2>
                  <h3><a href="/users/{{ .User.ID }}/novels" class="text-body-secondary text-decoration-none">{{ .User.Name }}</a></h3>
                  <p class="text-body-secondary small mb-0">
                    <span>{{ .Novel.WordCount }} word(s)</span> &middot; <span>{{ floor: .Novel.ReadingTime / 60 }} mins</span>
                  </p>
                </div>

                <!-- Options button that will stay on the side for larger screens but 'move' to the bottom for smaller screens -->
                <button
                  class="js-required custom-btn-secondary position-absolute top-50 end-0 translate-middle-y d-none d-lg-block"
                  type="button"
                  data-bs-toggle="modal"
                  data-bs-target="#NovelOptionsModal">
                  <i class="bi bi-gear me-2"></i>Options
                </button>

                <!-- The smaller version of the button for mobile that is displayed below the text -->
                <button
                  class="js-required custom-btn-secondary mt-3 d-lg-none"
                  type="button"
                  data-bs-toggle="modal"
                  data-bs-target="#NovelOptionsModal">
                  <i class="bi bi-gear me-2"></i>Options
                </button>
              </div>
            </div>

            <!-- The actual novel itself -->
            <!-- TODO: make background color configurable (need to update backend source files etc) -->
            <!-- NOTE: mb-4 so that the parent card doesn't cut off suddenly right after the novel content -->
            <div class="col-12 px-0 mb-4">
            <div id="content" class="fs-5 lh-lg card-body bg-off-white text-dark overflow-x-scroll h-100 w-100 mb-4 p-5" data-font="{{ .FontType }}" data-lang="{{ .Language }}" data-view="{{ .ViewMode }}">
              {{- raw: renderNovel(.Novel.Content) }}>
            </div>
            </div>

          <!-- Series navigation, if present -->
          {{- if .Novel.SeriesNavData }}
          <div class="col-9 px-0">
            <div class="custom-card">
              <div class="custom-card-body bg-charcoal-surface2 p-4">
                <h2 class="text-center px-3 mb-2">
                  <a href="/novel/series/{{ .Novel.SeriesNavData.SeriesID }}" class="text-body text-decoration-none">
                    {{- .Novel.SeriesNavData.Title }}
                  </a>
                </h2>
                <h3 class="text-body-secondary text-center">
                  {* NOTE: formatting for the i18n crawler *}
                  {{ seriesWorks := len(.NovelSeriesContentTitles) }}
                  {{- if seriesWorks == 1 }}
                    <a href="/novel/series/{{ .Novel.SeriesNavData.SeriesID }}" class="text-body-secondary text-decoration-none">
                      <i class="bi bi-stack me-2"></i>{{ seriesWorks }} work in this series
                    </a>
                  {{- else }}
                    <a href="/novel/series/{{ .Novel.SeriesNavData.SeriesID }}" class="text-body-secondary text-decoration-none">
                      <i class="bi bi-stack me-2"></i>{{ seriesWorks }} works in this series
                    </a>
                  {{- end }}
                </h3>
                <hr class="my-4">
                <div class="row row-col-auto nav nav-underline justify-content-center pb-2 px-3">
                  {{ activeState := .Novel.ID }}
                  {{ yield NovelNav(
                      baseURL="/novel/",
                      paths=.NovelSeriesIDs,
                      names=.NovelSeriesTitles,
                      activeState=activeState
                  ) }}
                </div>
              </div>
            </div>
          </div>
          {{- end }}
        </div>
      </div>
    </div>
  </div>

  <div class="col-12">
    <div class="row">
      <!-- Recent works -->
      <div class="col-12 col-lg-6">
        <!-- Author information -->
        <div class="custom-card bg-transparent mb-4 mb-lg-0">
          <div class="card-header border-0 rounded-5 bg-charcoal-surface1 py-3 px-4">
            <div class="d-flex align-items-center">
              <a href="/users/{{ .User.ID }}/novels">
                <img src="{{ .User.Avatar }}" alt="{{ .User.Name }}" class="rounded-circle object-fit-cover me-3" style="width: 48px; height: 48px;">
              </a>
              <a href="/users/{{ .User.ID }}/novels" class="text-body">
                <h2 class="m-0">{{ .User.Name }}</h2>
              </a>
            </div>
          </div>
          <div class="overflow-scroll overflow-lg-visible" id="horizontal-scroll">
            <div class="row flex-nowrap flex-lg-wrap mx-0">
              {{- range .Novel.UserNovels }}
              {*
              TODO: figure out how to make the affordance here visible on small devices, where the element uses overflow-scroll

                    Reducing col-12 causes the novel thumbnails to become too small, and hacking in a width larger than
                    than the viewport causes each time to have excess spacing if there isn't much content (few tags,
                    short titles, etc)

                    Setting a larger col width for the thumbnail at low breakpoints in fragments/novel-tn might work,
                    but creates possibility of unintended breakage elsewhere in the frontend

                    Duplicating fragments/novel-tn and customising it just for this purpose could also work. but an entirely different approach might be better at that point (e.g. using a modal)
              *}
              <div class="col-12 mt-1">
                <div class="custom-novel-card bg-transparent p-3 py-4 thumbnail-hover-dark">
                {{- include "fragments/novel-tn" . }}
                </div>
                <hr class="d-none d-lg-block my-0">
              </div>
              {{- end }}
            </div>
          </div>
        </div>
      </div>

      <!-- Comments section -->
      {{- yield Comments(data=.Novel, contentType="novel") }}
    </div>
  </div>

  {{- if len(.NovelRelated) > 0 }}
    <div class="col-12 mt-5">
      <h2>Related works</h2>
      <div class="row row-cols-1 row-cols-lg-2 g-4">
        {{- range .NovelRelated }}
        <div class="col mt-1">
          <div class="custom-novel-card bg-transparent p-3 py-4 thumbnail-hover-dark">
            {{- include "fragments/novel-tn" . }}
          </div>
          <hr class="my-0">
        </div>
        {{- end }}
      </div>
    </div>
  {{- end }}
</div>

<!-- End of main content -->

<!-- Novel options modal -->
<div class="modal fade" id="NovelOptionsModal" tabindex="-1" aria-labelledby="NovelOptionsModalLabel" aria-hidden="true" hx-boost="false">
  <div class="modal-dialog modal-lg">
    <div class="modal-content bg-charcoal-surface1 rounded-5 border-0 p-4">
      <div class="modal-header border-0 p-0 mb-4">
        <h2 class="modal-title" id="NovelOptionsModalLabel"><i class="bi bi-gear-fill me-2"></i>Novel options</h2>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body p-0">

        <fieldset>
          <legend class="fs-5 fw-bold">Font family</legend>
          {{- novelFontTypeValue := CookieList["pixivfe-NovelFontType"] }}
          <p>Choose the font style for displaying novels. This affects the readability and aesthetic of the text.</p>
          <form id="novel-font-form" hx-post="/settings/novelFontType" hx-target="next #form-htmx-target" hx-swap="outerHTML">
            <div class="form-check mb-3">
              <input class="form-check-input" type="radio" name="font-type" id="font-type-mincho" value="mincho" {{- if novelFontTypeValue == "mincho" }}checked{{- end }} />
              <label class="form-check-label fw-bold" for="font-type-mincho">Mincho</label>
              <div id="font-type-mincho-help" class="form-text">A serif font style that resembles traditional Japanese printing. It's often used for formal or literary content, providing a classic and elegant look.</div>
            </div>
            <div class="form-check mb-3">
              <input class="form-check-input" type="radio" name="font-type" id="font-type-gothic" value="gothic" {{- if novelFontTypeValue == "gothic" || novelFontTypeValue == "" }}checked{{- end }} />
              <label class="form-check-label fw-bold" for="font-type-gothic">Gothic</label>
              <div id="font-type-gothic-help" class="form-text">A sans-serif font style that's clean and modern. It's commonly used for easy readability on digital screens, offering a contemporary appearance.</div>
            </div>
            <button type="submit" class="custom-btn-secondary">Save</button>
          </form>
          <div id="form-htmx-target"></div>
        </fieldset>

        <hr class="my-4">

        <fieldset>
          <legend class="fs-5 fw-bold">Force text orientation</legend>
          {{- novelViewModeValue := CookieList["pixivfe-NovelViewMode"] }}
          <p>Set the text orientation for novels. This affects how the text is displayed and read on the page.</p>
          <form id="novel-view-mode-form" hx-post="/settings/novelViewMode" hx-target="next #form-htmx-target" hx-swap="outerHTML">
            <div class="form-check mb-3">
              <input class="form-check-input" type="radio" name="view-mode" id="tx-ori-h" value="1" {{- if novelViewModeValue == "1" }}checked{{- end }} />
              <label class="form-check-label fw-bold" for="tx-ori-h">Horizontal</label>
              <div id="tx-ori-h-help" class="form-text">Forces the text to be displayed horizontally, left-to-right. This is common for most languages and easier to read on smaller screens or for those more accustomed to Western text layouts.</div>
            </div>
            <div class="form-check mb-3">
              <input class="form-check-input" type="radio" name="view-mode" id="tx-ori-v" value="2" {{- if novelViewModeValue == "2" }}checked{{- end }} />
              <label class="form-check-label fw-bold" for="tx-ori-v">Vertical</label>
              <div id="tx-ori-v-help" class="form-text">Forces the text to be displayed vertically, top-to-bottom and right-to-left. This is traditional for some East Asian languages and can provide a unique reading experience, especially for longer texts.</div>
            </div>
            <div class="form-check mb-3">
              <input class="form-check-input" type="radio" name="view-mode" id="tx-ori-n" value="" {{- if novelViewModeValue == "" }}checked{{- end }} />
              <label class="form-check-label fw-bold" for="tx-ori-n">Don't force (default from Pixiv)</label>
              <div id="tx-ori-n-help" class="form-text">Uses the original text orientation as set by the author on Pixiv. This is the default option and respects the intended layout of the novel.</div>
            </div>
            <button type="submit" class="custom-btn-secondary">Save</button>
          </form>
          <div id="form-htmx-target"></div>
        </fieldset>

      </div>
    </div>
  </div>
</div>
{{- end }}
